const path = require("path");
//引入html页面插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入抽离css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//引入压缩css的插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//引入压缩、合并、混淆js的插件
const ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin");

module.exports = {
    //入口
    entry:{
        //公共的js
        common: "./js/common.js",

        //首页要用到的js
        index:{
            import:["./js/index.js"],
            //文件名
            filename:"script/index.[contenthash].js",
        },
        //首页2要用到的js
        index2:{
            import:["./js/index2.js"],
        },
        //关于页面
        about:{
            import:["./js/about.js"],
        },
        //案例页面
        case:{
            import:["./js/case.js"]
        },
        //案例详情页面
        caseInfo:{
            import:["./js/caseInfo.js"]
        },
        //产品页面
        products:{
            import:["./js/products.js"]
        }
    },
    output:{
        clean: true,
        //统一配置文件名
        filename:"script/[name].[contenthash].js",
    },
    mode:"production",
    devtool:false,
    plugins: [
        //首页
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            inject: "body",
            //指定要引入打包后的文件
            chunks: ["index","common"]
        }),
        //第二个首页
        new HtmlWebpackPlugin({
            template: "./src/index2.html",
            filename: "index2.html",
            inject: "body",
            //指定要引入打包后的文件
            chunks: ["index2","common"]
        }),
        //关于页面
        new HtmlWebpackPlugin({
            template: "./src/about.html",
            filename: "about.html",
            inject: "body",
            //指定要引入打包后的文件
            chunks: ["about","common"]
        }),
        //案例页面
        new HtmlWebpackPlugin({
            template: "./src/case.html",
            filename: "case.html",
            inject: "body",
            //指定要引入打包后的文件
            chunks: ["case","common"]
        }),
        //案例详情页面
        new HtmlWebpackPlugin({
            template: "./src/case-info.html",
            filename: "case-info.html",
            inject: "body",
            //指定要引入打包后的文件
            chunks: ["caseInfo","common"]
        }),
        //产品页面
        new HtmlWebpackPlugin({
            template: "./src/products.html",
            filename: "products.html",
            inject: "body",
            //指定要引入打包后的文件
            chunks: ["products","common"]
        }),
        new MiniCssExtractPlugin({
            filename: "styles/[contenthash].css",
          }),
          //js
          new ParallelUglifyPlugin({
            uglifyJS: {
              output: {
                beautify: false,
                comments: false,
              },
              compress: {
                drop_console: false,
                collapse_vars: true,
                reduce_vars: false,
              },
            },
          }),
    ],
    module: {
        rules:[
            {
                test: /\.css$/i,
                use:[MiniCssExtractPlugin.loader,"css-loader"]
            },
        ],
    },
    optimization:{
        minimizer: [new CssMinimizerPlugin()]
    }
}